:root {
  // 主题色
  --g-ui-primary: var(--el-color-primary);
  --g-ui-primary-light-1: var(--el-color-primary-light-1);
  --g-ui-primary-light-2: var(--el-color-primary-light-2);
  --g-ui-primary-light-3: var(--el-color-primary-light-3);
  --g-ui-primary-light-4: var(--el-color-primary-light-4);
  --g-ui-primary-light-5: var(--el-color-primary-light-5);
  --g-ui-primary-light-6: var(--el-color-primary-light-6);
  --g-ui-primary-light-7: var(--el-color-primary-light-7);
  --g-ui-primary-light-8: var(--el-color-primary-light-8);
  --g-ui-primary-light-9: var(--el-color-primary-light-9);
  // 表头背景色
  --g-table-th-bg: var(--el-color-primary-light-9);
  // tabs
  --g-tabs-active-bg: var(--el-color-primary-light-9);
  // el-button
  --g-button-bg: var(--g-ui-primary);

  // 主体
  --g-bg: #f2f2f2;
  --g-bg-color-secondary: #f2f3f5;
  --g-bg-color-secondary-hover: #e5e6eb;
  --g-container-bg: #fff;
  --g-border-color: #f2f2f2;
  --g-text-color: #333333;
  --g-text-color-light-3: #999999;
  // 头部
  --g-header-bg: #fff;
  --g-header-color: #333;
  --g-header-menu-color: #333;
  --g-header-menu-hover-bg: #f3f3f5;
  --g-header-menu-hover-color: #333;
  --g-header-menu-active-bg: var(--g-ui-primary);
  --g-header-menu-active-color: #fff;

  // 主导航
  --g-main-sidebar-bg: #282c34;
  --g-main-sidebar-menu-color: #fff;
  --g-main-sidebar-menu-hover-bg: var(--g-ui-primary);
  --g-main-sidebar-menu-hover-color: #fff;
  --g-main-sidebar-menu-active-bg: var(--g-ui-primary);
  --g-main-sidebar-menu-active-color: #fff;

  // 次导航
  --g-sub-sidebar-toolbar-collapse-bg: #fff;
  --g-sub-sidebar-bg: #fff;
  --g-sub-sidebar-logo-bg: #fff;
  --g-sub-sidebar-logo-color: #333;
  --g-sub-sidebar-menu-color: #0f0f0f;
  --g-sub-sidebar-menu-hover-bg: #f3f3f5;
  --g-sub-sidebar-menu-hover-color: #0f0f0f;
  --g-sub-sidebar-menu-active-bg: var(--g-ui-primary-light-8);
  --g-sub-sidebar-menu-active-color: var(--g-ui-primary);
  // 标签栏
  --g-tabbar-dividers-bg: #a3a3a3;
  --g-tabbar-tab-bg: #f5f7fa;
  --g-tabbar-tab-color: #0f0f0f;
  --g-tabbar-tab-hover-bg: #f3f3f5;
  --g-tabbar-tab-hover-color: #999;
  --g-tabbar-tab-hover-border-color: #999;
  --g-tabbar-tab-active-bg: var(--g-ui-primary-light-8);
  --g-tabbar-tab-active-color: var(--g-ui-primary);
  --g-tabbar-tab-active-border-color: var(--g-ui-primary);

  /* ----- 暗黑模式 ----- */
  &.dark {
    // 表头背景色
    --g-table-th-bg: #141414;
    // el-tabs
    --g-tabs-active-bg: #141414;
    // el-button
    --g-button-bg: #141414;

    // 主体
    --g-bg: #0a0a0a;
    --g-bg-color-secondary: #141414;
    --g-bg-color-secondary-hover: #141414;
    --g-container-bg: #141414;
    --g-border-color: #15191e;
    --g-text-color: #fff;
    --g-text-color-light-3: #e5e7eb;
    // 头部
    --g-header-bg: #141414;
    --g-header-color: #e5e5e5;
    --g-header-menu-color: #999;
    --g-header-menu-hover-bg: #333;
    --g-header-menu-hover-color: #fff;
    --g-header-menu-active-bg: #333;
    --g-header-menu-active-color: #fff;
    // 主导航
    --g-main-sidebar-bg: #0a0a0a;
    --g-main-sidebar-menu-color: #999;
    --g-main-sidebar-menu-hover-bg: #141414;
    --g-main-sidebar-menu-hover-color: #e5e5e5;
    --g-main-sidebar-menu-active-bg: var(--g-ui-primary);
    --g-main-sidebar-menu-active-color: #fff;
    // 次导航
    --g-sub-sidebar-toolbar-collapse-bg: #333;
    --g-sub-sidebar-bg: #141414;
    --g-sub-sidebar-logo-bg: #0f0f0f;
    --g-sub-sidebar-logo-color: #e5e5e5;
    --g-sub-sidebar-menu-color: #a8a29e;
    --g-sub-sidebar-menu-hover-bg: #0a0a0a;
    --g-sub-sidebar-menu-hover-color: #e5e5e5;
    --g-sub-sidebar-menu-active-bg: #333;
    --g-sub-sidebar-menu-active-color: #fff;
    // 标签栏
    --g-tabbar-dividers-bg: #a8a29e;
    --g-tabbar-tab-color: #fff;
    --g-tabbar-tab-hover-bg: #1b1b1b;
    --g-tabbar-tab-hover-color: #e5e5e5;
    --g-tabbar-tab-active-color: #fff;
    --g-tabbar-tab-bg: #0f0f0f;
    --g-tabbar-tab-active-bg: #333;
    --g-tabbar-tab-active-border-color: #999;
  }
}
